<template>
  <div class="banner-box">
    <van-swipe v-if="realBanners" :autoplay="3000" :duration="1200" class="swiper-box" indicator-color="white">
      <van-swipe-item v-for="(item, index) in realBanners" :key="index" class="swiper-item">
        <div @click="wantToPlay(item)">
          <img :src="item.pic" :alt="item.url">
        </div>
      </van-swipe-item>
    </van-swipe>
    <client-only>
      <van-grid v-model="active" class="enter-list" active-color="#07c160" inactive-color="#000">
        <van-grid-item icon="photo-o" text="歌手" />
        <van-grid-item icon="photo-o" text="歌单分类" />
        <van-grid-item icon="photo-o" text="排行榜" />
        <van-grid-item icon="photo-o" text="视频" />
      </van-grid>
    </client-only>
  </div>
</template>

<script>
import { songDetailList } from '@/utils/api/song'

export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      active: 0
    }
  },
  computed: {
    // 过滤 跳转广告等的banner
    realBanners () {
      let temp = []
      const banner = this.list
      // targetType: 1 单曲 10 专辑(一组歌曲) 3000 直播/专题链接 1005 广告
      if (banner && banner.length > 0) {
        temp = banner.filter(
          item => item.targetType === 1 || item.targetType === 10)
      }
      return temp
    }
  },
  methods: {
    async wantToPlay (item) {
      if (item.targetType === 1) {
        this.$toast('我想播放单曲: ' + item.targetId)
        const id = item.targetId
        await this.getSongListDetail([id])
      }
      if (item.targetType === 10) {
        this.$toast('我想查看专辑: ' + item.targetId)
        this.$router.push({ path: `/listDetail/${item.targetId}` })
      }
    },
    async getSongListDetail (ids) {
      // 根据歌曲id获取歌曲信息
      const list = await songDetailList(ids)
      if (list.data.code !== 200) {
        this.$toast('找不到音乐')
        return
      }
      this.$store.commit('player/setCurrentPlayerList', list.data.songs)
      this.$store.commit('player/setCurrentPlayObj', list.data.songs[0])
      // 展开播放器组件
      setTimeout(() => {
        this.$store.commit('player/setShowPlayerUi', true)
        this.$store.commit('player/setMiniUi', !this.$store.state.player.miniUi)
      }, 200)
    }
  }
}
</script>

<style lang="scss" scoped>
.banner-box {
  .swiper-box {
    width: 100%;
    overflow: hidden;
    .swiper-item {
      padding: 6px;
      box-sizing: border-box;
      div {
        img {
          border-radius: 6px;
          box-sizing: border-box;
        }
      }
    }
  }
  .enter-list {
    width: 100%;
    height: 110px;
    line-height: 50px;
  }
}
</style>
